import React from 'react';
import {keyframes} from '@emotion/core';
import styled from '@emotion/styled';

function SuggestedAssignees(props: {className?: string}) {
  return (
    <svg
      viewBox="0 0 320 320"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      {...props}
    >
      <g id="suggested-assignees">
        <path fill="#fff" d="M0 0h320v320H0z" />
        <path
          id="Oval"
          d="M160 251c-50.258 0-91-40.742-91-91s40.742-91 91-91 91 40.742 91 91-40.742 91-91 91z"
          fill="url(#paint0_linear)"
        />
        <g id="assignee-dial">
          <path
            id="Union"
            fillRule="evenodd"
            clipRule="evenodd"
            d="M172.1 100.2L160.5 85l-11.429 14.976C120.597 105.127 99 130.041 99 160c0 33.689 27.311 61 61 61s61-27.311 61-61c0-29.547-21.007-54.187-48.9-59.8z"
            fill="#fff"
          />
        </g>
        <path
          id="E3fc2x"
          d="M139.644 164v-1.064h-4.592v-3.458h4.2v-1.036h-4.2v-3.178h4.592V154.2h-5.796v9.8h5.796zm2.595-3.22c.266 2.338 1.582 3.43 3.542 3.43.966 0 1.764-.28 2.366-.826.602-.56.91-1.26.91-2.114 0-1.442-.812-2.366-1.862-2.604v-.028a2.056 2.056 0 0 0 1.526-2.03c0-.826-.28-1.456-.826-1.918-.546-.462-1.246-.7-2.1-.7-.84 0-1.54.252-2.1.742-.546.49-.868 1.148-.952 1.974l1.092.196c.154-1.176.826-1.862 1.946-1.862s1.82.616 1.82 1.638c0 .686-.364 1.176-.924 1.358-.56.168-.882.21-1.288.21h-.294v1.008h.7c1.428 0 2.142.658 2.142 1.988 0 1.078-.756 1.918-2.17 1.918-1.47 0-2.17-.812-2.394-2.604l-1.134.224zm13.054 3.22v-6.398h2.688v-1.022h-2.702v-.91c0-.714.154-.868.728-.868h1.302v-1.022h-1.512c-1.05 0-1.652.42-1.652 1.666v1.134h-2.338v1.022h2.338V164h1.148zm10.995-2.842a2.655 2.655 0 0 1-.63 1.428c-.35.392-.798.588-1.344.588-1.4 0-2.254-1.092-2.254-2.884 0-1.806.896-2.884 2.24-2.884 1.12 0 1.736.798 1.96 1.904l1.078-.224c-.126-.798-.462-1.456-1.022-1.96-.546-.504-1.218-.756-2.016-.756-.966 0-1.778.35-2.436 1.064-.644.7-.966 1.652-.966 2.856 0 1.218.322 2.17.952 2.87.63.7 1.456 1.05 2.45 1.05 1.638 0 2.856-1.106 3.094-2.828l-1.106-.224zm9.918 2.842v-1.162h-5.152c0-.574.098-1.008.28-1.302.098-.154.196-.266.378-.42.182-.154.252-.21.532-.378l.742-.406.462-.252.196-.112.952-.532c.182-.112.42-.308.742-.574.63-.56.84-1.176.84-2.03 0-.798-.266-1.47-.812-2.016s-1.302-.826-2.268-.826c-1.918 0-3.262 1.19-3.332 3.206l1.12.112c.07-1.442.896-2.268 2.184-2.268 1.33 0 1.988.784 1.988 1.736.07.574-.294 1.106-.63 1.414-.084.098-.266.224-.532.392s-.462.294-.602.364l-.784.434c-1.148.602-1.876 1.148-2.184 1.638-.336.49-.504 1.19-.504 2.1V164h6.384zm3.925 0l1.932-3.052h.028l1.96 3.052h1.302l-2.506-3.808 2.338-3.612h-1.274l-1.806 2.856h-.028l-1.806-2.856h-1.288l2.352 3.612-2.506 3.808h1.302z"
          fill="#B04E8C"
        />
        <path id="avatar-new-no-circle-4" fill="url(#pattern0)" d="M23 61h51v51H23z" />
        <path id="avatar-new-no-circle-1" fill="url(#pattern1)" d="M133 5h57v58h-57z" />
        <path id="avatar-new-no-circle-6" fill="url(#pattern2)" d="M247 53h55v61h-55z" />
        <path id="avatar-new-no-circle-5" fill="url(#pattern3)" d="M248 210h56v59h-56z" />
        <path id="avatar-new-no-circle-2" fill="url(#pattern4)" d="M134 261h55v55h-55z" />
        <path id="avatar-new-no-circle-3" fill="url(#pattern5)" d="M20 202h57v58H20z" />
      </g>
      <defs>
        <pattern
          id="pattern0"
          patternContentUnits="objectBoundingBox"
          width="1"
          height="1"
        >
          <use xlinkHref="#image0" transform="scale(.00654)" />
        </pattern>
        <pattern
          id="pattern1"
          patternContentUnits="objectBoundingBox"
          width="1"
          height="1"
        >
          <use xlinkHref="#image1" transform="scale(.00654 .00641)" />
        </pattern>
        <pattern
          id="pattern2"
          patternContentUnits="objectBoundingBox"
          width="1"
          height="1"
        >
          <use xlinkHref="#image2" transform="scale(.00654 .00585)" />
        </pattern>
        <pattern
          id="pattern3"
          patternContentUnits="objectBoundingBox"
          width="1"
          height="1"
        >
          <use xlinkHref="#image3" transform="scale(.00641 .00606)" />
        </pattern>
        <pattern
          id="pattern4"
          patternContentUnits="objectBoundingBox"
          width="1"
          height="1"
        >
          <use xlinkHref="#image4" transform="scale(.00654)" />
        </pattern>
        <pattern
          id="pattern5"
          patternContentUnits="objectBoundingBox"
          width="1"
          height="1"
        >
          <use xlinkHref="#image5" transform="scale(.00654 .00641)" />
        </pattern>
        <linearGradient
          id="paint0_linear"
          x1="251"
          y1="69"
          x2="69"
          y2="69"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#BC5090" />
          <stop offset="1" stopColor="#4C416B" />
        </linearGradient>
        <image
          id="image0"
          data-name="avatar-new-no-circle-4.png"
          width="153"
          height="153"
          xlinkHref=""
        />
        <image
          id="image1"
          data-name="avatar-new-no-circle-1.png"
          width="153"
          height="156"
          xlinkHref=""
        />
        <image
          id="image2"
          data-name="avatar-new-no-circle-6.png"
          width="153"
          height="171"
          xlinkHref=""
        />
        <image
          id="image3"
          data-name="avatar-new-no-circle-5.png"
          width="156"
          height="165"
          xlinkHref=""
        />
        <image
          id="image4"
          data-name="avatar-new-no-circle-2.png"
          width="153"
          height="153"
          xlinkHref=""
        />
        <image
          id="image5"
          data-name="avatar-new-no-circle-3.png"
          width="153"
          height="156"
          xlinkHref=""
        />
      </defs>
    </svg>
  );
}

const spin = keyframes`
  0%,
  to {
    transform: rotate(0deg);
  }
  25%,
  8% {
    transform: rotate(60deg);
  }
  33%,
  60% {
    transform: rotate(240deg);
  }
  68%,
  96% {
    transform: rotate(180deg);
  }
`;

const StyledSuggestedAssignees = styled(SuggestedAssignees)`
  #assignee-dial {
    animation: 10s ${spin} cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
    transform-origin: center center;
  }
`;

export default StyledSuggestedAssignees;
